<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form class="verify-form" style="width: 300px">
    <div class="title">邮箱验证码</div>
    <p class="message">感谢您注册龙茶清欢社区账号！您的注册验证码如下！</p>
    <!-- 将所有input元素设为只读，由于是邮箱验证码，不需要输入功能，因此只保留 input 可读性 -->
    <!-- 直接操作 freemarker 传递过来的数据，通过Map中的key即可获取动态数据 -->
    <div class="verify-code">
        <input type="text" readonly maxlength="1" value="${verifyCode?substring(0,1)}">
        <input type="text" readonly maxlength="1" value="${verifyCode?substring(1,2)}">
        <input type="text" readonly maxlength="1" value="${verifyCode?substring(2,3)}">
        <input type="text" readonly maxlength="1" value="${verifyCode?substring(3,4)}">
        <input type="text" readonly maxlength="1" value="${verifyCode?substring(4,5)}">
        <input type="text" readonly maxlength="1" value="${verifyCode?substring(5,6)}">
    </div>
    <button id="action">一键复制</button>
</form>

<script type="text/javascript">

    // 获取按钮元素
    const button = document.getElementById('action');
    // 添加点击事件的监听器
    // TODO 点击按钮复制成功之后，给出成功提示，可以选择改变按钮的样式或者弹窗
    button.addEventListener('click', function(event) {
        // 阻止表单的默认提交行为，防止自动提交刷新
        event.preventDefault();

        // 在这里可以编写点击按钮时要执行的代码
        console.log('按钮被点击了');
        // 可以在这里调用处理输入值的函数

        // 获取所有的 input 元素
        const inputs = document.querySelectorAll('.verify-code input');
        // 获取所有 input 的值
        let inputValues = "";
        inputs.forEach(function(input) {
            inputValues += input.value;
        });
        console.log(inputValues);
        // 将值放入剪贴板
        navigator.clipboard.writeText(inputValues)
            .then(function() {
                console.log('内容已成功复制到剪贴板');
                // TODO 给出成功提示
                // 修改按钮的样式
                button.style.backgroundColor = 'green';
                button.innerText = '复制成功';
            })
            .catch(function(err) {
                console.error('无法复制到剪贴板', err);
                // 如果复制不成功，也可以修改按钮的样式来表示失败
                button.style.backgroundColor = 'red';
                button.innerText = '复制失败';
            });
    });

</script>
</body>
<style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #e1e7ef;
    }

    .verify-form {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 300px;
        background-color: white;
        border-radius: 12px;
        padding: 20px;
    }

    .title {
        font-size: 20px;
        font-weight: bold;
        color: black
    }

    .message {
        color: #a3a3a3;
        font-size: 14px;
        margin-top: 10px;
        text-align: center
    }

    .verify-code {
        margin-top: 10px
    }

    .verify-code input {
        width: 32px;
        height: 32px;
        text-align: center;
        border: none;
        border-bottom: 2px solid #d2d2d2;
        margin: 0 10px;
    }

    .verify-code input:focus {
        border-bottom: 2px solid royalblue;
        outline: none;
    }

    #action {
        margin-top: 24px;
        padding: 12px 16px;
        border-radius: 8px;
        border: none;
        background-color: royalblue;
        color: white;
        cursor: pointer;
    }
</style>
</html>